<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>保时捷2</title>
    <link rel="stylesheet" href="css/style2.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

</head>
<body class="index">
<div class="logo">
    <img src="https://files1.porsche.com/filestore/image/multimedia/none/875d5e3d-6763-47fe-bc52-809142d53274/svg/d4c766d7-7761-11e7-99c7-0019999cd470/porsche-svg.svg" alt="">
</div>
<ul class="nav">
    <div class="container">
        <li><a href="#">所有车型</a>
            <div class="box">
                <div class="one-box num">
                    <div class="border fix">
                        <span>718</span>
                        <div class="div">
                            <div class="img one"></div>
                            <span>&gt;</span>
                        </div>
                    </div>
                    <div class="box-txt">
                        <div class="cayman">
                            <div class="boxster">
                                <p onclick="tz()">718&nbsp;Cayman&nbsp;车型</p>
                                <span>&gt;</span>
                            </div>
                            <div class="boxster">
                                <p>718&nbsp;Boxster&nbsp;车型</p>
                                <span>&gt;</span>
                            </div>
                            <div class="boxster">
                                <p>全新&nbsp;718&nbsp;T&nbsp;车型</p>
                                <span>&gt;</span>
                            </div>
                            <div class="boxster">
                                <p>718&nbsp;GTS&nbsp;车型</p>
                                <span>&gt;</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="one-box num">
                    <div class="border fix">
                        <span>911</span>
                        <div class="div">
                            <div class="img two"></div>
                            <span>&gt;</span>
                        </div>
                    </div>
                    <div class="box-txt">
                        <div class="carrera">
                            <div class="targa">
                                <p>全新&nbsp;911&nbsp;Carrera&nbsp;车型</p>
                                <span>&gt;</span>
                            </div>
                            <div class="targa">
                                <p>911&nbsp;Carrera&nbsp;车型</p>
                                <span>&gt;</span>
                            </div>
                            <div class="targa">
                                <p>911&nbsp;Targa&nbsp;4&nbsp;车型</p>
                                <span>&gt;</span>
                            </div>
                            <div class="targa">
                                <p>911&nbsp;GTS&nbsp;车型</p>
                                <span>&gt;</span>
                            </div>
                            <div class="targa">
                                <p>911&nbsp;Turbo&nbsp;车型</p>
                                <span>&gt;</span>
                            </div>
                            <div class="targa">
                                <p>911&nbsp;GT3&nbsp;车型</p>
                                <span>&gt;</span>
                            </div>
                            <div class="targa">
                                <p>911&nbsp;GT2&nbsp;RS&nbsp;车型</p>
                                <span>&gt;</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="one-box num">
                    <div class="border fix">
                        <span>Panamera</span>
                        <div class="div">
                            <div class="img three"> </div>
                            <span>&gt;</span>
                        </div>
                    </div>
                    <div class="box-txt">
                        <div class="panamera">
                            <div class="turbo">
                                <p>Panamera &bnot;车型</p>
                                <span>&gt;</span>
                            </div>
                            <div class="turbo">
                                <p>全新&bnot;Panamera&bnot;GTS&bnot;车型</p>
                                <span>&gt;</span>
                            </div>
                            <div class="turbo">
                                <p>Panamera&bnot;Turbo&bnot;车型</p>
                                <span>&gt;</span>
                            </div>
                            <div class="turbo">
                                <p>Panamera&bnot;E-Hybrid&bnot;车型</p>
                                <span>&gt;</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="one-box num">
                    <div class="border fix">
                        <span>Macan</span>
                        <div class="div">
                            <div class="img four"> </div>
                            <span>&gt;</span>
                        </div>
                    </div>
                    <div class="box-txt">
                        <div class="macan">
                            <div class="maom">
                                <p>新款&bnot;Macan</p>
                                <span>&gt;</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="one-box num">
                    <div class="border fix">
                        <span>Cayenne</span>
                        <div class="div">
                            <div class="img five"> </div>
                            <span>&gt;</span>
                        </div>
                    </div>
                    <div class="box-txt">
                        <div class="cayenne">
                            <div class="coupe">
                                <p>Cayenne&bnot;车型</p>
                                <span>&gt;</span>
                            </div>
                            <div class="coupe">
                                <p>全新&bnot;Cayenne&bnot;车型</p>
                                <span>&gt;</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="one-box num">
                    <div class="border fix">
                        <span>E-performance</span>
                        <div class="div">
                            <div class="img six"> </div>
                            <span>&gt;</span>
                        </div>
                    </div>

                    <div class="box-txt">
                        <div class="missione">
                            <div class="turismo">
                                <p>Mission&bnot;</p>
                                <span>&gt;</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li>|</li>
        <li class="car">保时捷认可易手车
            <div class="box">
                <div>
                    <span>保时捷全球易手车展示平台</span>
                </div>
                <div>
                    <span>Porsche Approved</span>
                </div>
            </div>
        </li>
        <li>赛车 & 活动</li>
        <li>个性化与服务</li>
        <li>关于保时捷</li>
    </div>
</ul>


<div class="medn" id="men">
    <div class="container">
        <div class="box-a">
            <h1>70 &bnot; 载跑车魅力</h1>
            <p>70年来，保时捷的一切围绕着极致跑车。我们想与你和全世界分享这种感觉。</p>
            <p>#Sportscar &bnot;Together</p>
        </div>
    </div>
</div>


<div class="coleda">
    <div class="container">
        <div class="box-b">
            <div class="top">
                <img src="images/img5-3.jpg" alt="">
                <div class="triangle_border_right" id="vbnm">
                    <span id="span"></span>
                </div>
            </div>
            <div class="bottom">
                <video width="100%" height="700" id="vieo" controls>
                    <source src="video/porsche-video.mp4" type="video/mp4">
                    <source src="video/porsche-video.mp4" type="video/ogg">
                </video>
            </div>
        </div>
    </div>
</div>


<div class="setn">
    <div class="container">
        <div class="box-c">
            <div class="col-md-6">
                <img src="images/img5-1.jpg" alt="">
            </div>
            <div class="col-md-6">
                <h2>1948-2019：里程碑</h2>
                <p>沿着保时捷历史上的重大里程碑开启一段激动人心的魅力旅之程：
                    从开山鼻祖保时捷 Typ 356“No. 1” 跑车到极富传奇色彩的 911，
                    再到最新款保时捷车型和概念车。</p>
                <a href="">&gt;了解更多</a>
            </div>
        </div>
    </div>
</div>


<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="container">
                <div class="col-md-6">
                    <div class="kuang">
                        <img src="images/img5-4.jpg" alt="">
                        <video width="100%" height="337.5px" controls autoplay>
                            <source src="video/porsche-video(1).mp4" type="video/mp4">
                            <source src="video/porsche-video(1).mp4" type="video/ogg">
                        </video>
                    </div>
                </div>
                <div class="col-md-6">
                    <p>两个人的风景。一车，二人，全世界。</p>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="container">
                <div class="col-md-6">
                    <div class="kuang">
                        <img src="images/img5-4.jpg" alt="">
                        <video width="100%" height="337.5px" controls autoplay>
                            <source src="video/porsche-video.mp4" type="video/mp4">
                            <source src="video/porsche-video.mp4" type="video/ogg">
                        </video>
                    </div>
                </div>
                <div class="col-md-6">
                    <p>家庭的一份子。一车，二人，全世界。</p>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="container">
                <div class="col-md-6">
                    <div class="kuang">
                        <img src="images/img5-6.jpg" alt="">
                        <video width="100%" height="337.5px" controls>
                            <source src="video/porsche-video(1).mp4" type="video/mp4">
                            <source src="video/porsche-video(1).mp4" type="video/ogg">
                        </video>
                    </div>
                </div>
                <div class="col-md-6">
                    <p>您的伴侣呢？一车，二人，全世界。</p>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-slide">
                <div class="container">
                    <div class="col-md-6">
                        <div class="kuang">
                            <img src="images/img5-7.jpg" alt="">
                            <video width="100%" height="337.5px" controls>
                                <source src="video/porsche-video(1).mp4" type="video/mp4">
                                <source src="video/porsche-video(1).mp4" type="video/ogg">
                            </video>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
</div>


<div class="edition">
    <div class="container">
        <div class="sports">
            <div class="col-md-6">
                <img src="images/img5-8.jpg" alt="">
            </div>
            <div class="col-md-6">
                <h2>Porsche Design 1919 Datetimer 70YSports
                    Sports Car Limited Edition</h2>
                <p>70 载跑车历史70 载澎湃激情用一款特别版手表来庆祝这一特殊的日子。众多设计特色与材料灵感均源自具有保时捷 911
                    具有传奇色彩的前一代产品——保时捷 356，它们在这款 <nobr>Porsche</nobr>
                    Design 周年特别纪念款中获得了新生。限量 1948 件。</p>
                <a href="">&gt;了解更多</a>
            </div>
        </div>
    </div>
</div>


<div class="christop">
    <div class="container">
        <div class="horus">
            <span><i class="fa fa-external-link"></i> &bnot; 分享主页</span>
        </div>
        <div class="horus1">
            <div class="poi1"><i class="fa fa-space-shuttle"></i></div>
            <div class="poi2"><i class="fa fa-tencent-weibo"></i></div>
            <div class="poi3"><i class="fa fa-qq"></i></div>
            <div class="poi4"><i class="fa fa-weibo"></i></div>
            <div class="poi5"><i class="fa fa-renren"></i></div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="container">
        <div class="foot">
            <p class="qwer">©2019&bnot;保时捷&bnot;（中国）&bnot; 汽车销售有限公司 <a href="">法律声明</a> <a href="">English</a> <a href="">泸ICP备 &bnot; 10013326号</a></p>
            <p>保时捷中国最强烈建议您：只在授权的保时捷中心购买车辆和配件</p>
            <p>请 <a href="index.html">还回主页</a>获得更多</p>
        </div>
    </div>
</div>
<div class="font">
    <div class="amerf" id="amerf">
        <i class="fa fa-upload"></i>
    </div>
</div>

<script src="js/swiper.min.js"></script>
<script>
    function tz() {
        window.location.href="index3.html"
    }

    var vb = document.querySelector("#vbnm");
    var box = document.querySelector(".top");
    var ba = document.querySelector("#medn")
    var vv = document.querySelector("#vieo");

    vb.addEventListener('click',function () {
        box.style.display = "none";
        vv.style.display = "block";
        ba.style.display = "none"
    })


    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
    var tt = document.querySelector("#amerf");
    window.onscroll = function () {
        if (document.documentElement.scrollTop > 50 || document.body.scrollTop > 50){
            tt.style.display = "block";
        }else {
            tt.style.display = "none";
        }
    };
    //    点击返回顶部
    tt.onclick=function () {
        if (document.body.scrollTop!=0){
            window.scrollTo(0,0);
        }
        window.scrollTo({
            top:0,
            behavior:'smooth'
        })
    };


</script>

</body>
</html>

